<template>
	<div class="toJcenter">
		<div class="lbts">
			<van-swipe :autoplay="3000">
				<van-swipe-item v-for="(image, index) in images" :key="index">
					<img v-lazy="image" />
				</van-swipe-item>
			</van-swipe>
		</div>
		<div class="one" v-for="(v, index) in arr" :key="index">
			<!-- :img1="v.img1" :proname="v.proname" -->
			<!-- :originprice="v.originprice" @click="goxqy(v)" -->
			<img :src="v.img1" alt="" class="img">
		
			<div class="bo">
				<p class="pric">{{ v.tex }}</p>
				<div class="span1">{{ v.tex1 }}</div>
				<span class="span2">{{ v.tex2 }}</span>
				<div class="yuding">{{ v.desc }}</div>
				<div class="an"> ￥{{v.money}}</div>
				<span class="ren">起</span>
			</div>
		</div>

		<!-- 回到顶部 -->
			<img
				src="https://img.alicdn.com/tfs/TB1qGFR31L2gK0jSZPhXXahvXXa-122-122.png"
				alt="" class="toTop" @click="toTops">
	</div>
</template>

<script>

import Vue from 'vue';
import { Lazyload } from 'vant';
Vue.use(Lazyload);
export default {
	data() { 
		return {
			arr: [
				// { img1: "https://img.alicdn.com/imgextra/i1/6000000002270/O1CN01GPSPG61SdhhFPyg8B_!!6000000002270-0-hotel.jpg_600x600q60.jpg_.webp", tex: "北京粤财JW万豪酒店", tex1: "4.8 很好 ", tex2: "游泳池设施尤为舒服", desc: "1天内12人预订", money: "3375" },
				// { img1: "https://img.alicdn.com/imgextra/i3/6000000005702/O1CN01bUCP7d1rzYzqzsLDq_!!6000000005702-0-hotel.jpg_600x600q60.jpg_.webp", tex: "北京前门建国饭店", tex1: "4.7 很好 ", tex2: "酒店装修风格很中国风", desc: "入选天安门广场特卖榜", money: "1105" },
				// { img1: "https://img.alicdn.com/imgextra/i2/6000000006382/O1CN0114e8oz1x10Mn1OaWS_!!6000000006382-0-hotel.jpg_600x600q60.jpg_.webp", tex: "时光漫步酒店（北京雍和宫南锣鼓巷后海店）", tex1: "4.9 超棒 ", tex2: "很温馨的一家小酒店", desc: "南锣鼓巷特卖榜第1名", money: "604" },
				// { img1: "https://img.alicdn.com/imgextra/i2/6000000003932/O1CN01vbQD581eutxbLQ0oA_!!6000000003932-0-hotel.jpg_600x600q60.jpg_.webp", tex: "北京前门建国饭店", tex1: "4.7 很好 ", tex2: "枕头和床垫很舒适", money: "489" },
				// { img1: "https://img.alicdn.com/imgextra/i4/6000000005913/O1CN01dRrIWC1tYCdCwcJj5_!!6000000005913-0-hotel.jpg_600x600q60.jpg_.webp", tex: "北京懿庭臻舍酒店（北京天安门广场店）", tex1: "4.7 很好 ", tex2: "酒店很贴心的升级了亲子房", desc: "1天内14人预订", money: "575" },
				// { img1: "https://img.alicdn.com/imgextra/i2/6000000001503/O1CN01W1S9IV1MyPupXnBra_!!6000000001503-0-hotel.jpg_600x600q60.jpg_.webp", tex: "北京诺富特和平宾馆", tex1: "4.7 很好 ", tex2: "大堂经理态度特别好", desc: "天安门广场特卖榜第1名", money: "809" },
				// { img1: "https://img.alicdn.com/imgextra/i3/6000000005698/O1CN015GW0pQ1rxjPVR7iqL_!!6000000005698-0-hotel.jpg_600x600q60.jpg_.webp", tex: "北京金芒果酒店", tex1: "4.8 很好 ", tex2: "店家服务热情",money: "475" },
				// { img1: "https://img.alicdn.com/imgextra/i2/6000000006168/O1CN011FcGOt1vQzc4hXAhy_!!6000000006168-0-hotel.jpg_600x600q60.jpg_.webp", tex: "北京饭店", tex1: "4.7 很好 ", tex2: "高端大气上档次", desc: "天安门豪华热卖榜第3名", money: "758" },
				// { img1: "https://img.alicdn.com/imgextra/i2/6000000004970/O1CN01JDegHc1maJ4Xmydxu_!!6000000004970-0-hotel.jpg_600x600q60.jpg_.webp", tex: "北京前门建国饭店", tex1: "4.8 很好 ", tex2: "房间干净整洁宽敞明亮", desc: "1天内5人预订", money: "263" },
				// { img1: "https://img.alicdn.com/imgextra/i1/6000000007601/O1CN0140H4QK261J7h6SbCu_!!6000000007601-0-hotel.jpg_600x600q60.jpg_.webp", tex: "麗枫酒店·北京国贸店", tex1: "4.7 很好 ", tex2: "床垫子很舒服", desc: "北京飞行达人爱住榜第3名", money: "487" },
			],
			images: [
				'https://gw.alicdn.com/imgextra/i2/O1CN01KZeZmL1HjEt1zw7CC_!!6000000000793-2-tps-351-450.png_600x600q60.jpg_.webp',
				'https://gw.alicdn.com/imgextra/i3/O1CN01A5oYhI1y42k91ytmg_!!6000000006524-2-tps-351-450.png_600x600q60.jpg_.webp',
				'https://img.alicdn.com/imgextra/i2/O1CN01THa9K31DQgNcuOWJ6_!!6000000000211-0-tps-351-450.jpg_600x600q60.jpg_.webp',
				'https://gw.alicdn.com/imgextra/i3/O1CN01A5oYhI1y42k91ytmg_!!6000000006524-2-tps-351-450.png_600x600q60.jpg_.webp',
			],
		}
	},
	methods: {
		toTops() {
			window.scrollTo({ top: 0, behavior: 'smooth' })
			if (top == 0) {
				toTop.style.display = none
			}
			// console.log(222);
		}
	},
	async created() {
		this.$http({
			url: ' http://localhost:3000/syjdcent',
			method: "get"
		}).then(res => {
			this.arr = res.data

		})
	}
	
}
</script>

<style scoped>
.toJcenter{
	padding: 0 .15rem 0 .15rem;
	margin-top: 1.28rem;
	box-sizing: border-box;
		background-color: #f4f4f4;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
}
.van-swipe {
	width: 100%;
	height: 5rem;
	border-radius: 10px;
}

img {
	width: 100%;
	height: 100%;
	border-radius: .3rem;
}

.lbts {
	height: 5rem;
	width: 3.5rem;
	border-radius: .3rem;
	box-sizing: border-box;
}
.one {
	width: 3.5rem;
	height: 5.56rem;
	box-sizing: border-box;
	margin-top: 5px;
	font-size: .26rem;
	display: flex;
	justify-content: space-evenly;
	flex-wrap: wrap;
	background-color: white;
	border-radius: .2rem;
	border: 1px solid transparent;
}

.one .img {
	width: 100%;
	height: 3.5rem;
	border-radius: 10px 10px 0 0;
	border-radius: .2rem;
}
.bo{
	width: 3.5rem;
	box-sizing: border-box;
}

.pric {
	width: 100%;
	height: 20px;
	font-size: 14px;
	margin-left: 0.1rem;
	box-sizing: border-box;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.span1{
	color: #00ab9d;
	margin-right: .05rem;
	margin-left: 0.1rem;
	width: 100%;
	
}
.span2{
	display: block;
	color: #00ab9d;
	position: relative;
	top: -0.35rem;
	width: 70%;
	margin-left: 1.1rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.yuding{
	width: 98%;
	height: .37rem;
			color: rgb(255, 64, 26);
			margin-top: -0.3rem;
			position: relative;
			left: .1rem;
}
.an{
			color: #ff401a;
			font-size: 16px;
			margin-left: .1rem;
			margin-top: .1rem;
}

.ren {
	margin-left: .1rem;
	font-size: .12rem;
	color: rgb(148, 147, 147);
	position: relative;
	top: -.35rem;
	left: 1.1rem;
}

.toTop {
	width: .8rem;
	height: .8rem;
	position: fixed;
	bottom: .6rem;
	right: .2rem;
	z-index: 999;
}
</style>